<template>
  <div >

    <!-- 布局 ：居中 -->
    <van-row>
  <van-col span="2"></van-col>
  <van-col span="20">  
    <van-row> 
      <van-col span="6"></van-col> 
      <van-col span="12">
    <van-image round show-error
    width="100"
     height="100"
    :src="tbUser.userIcon"/>

    <!-- <van-form @submit="uploadIcon"> -->
      <van-field name="uploader" label="">
            <template #input>
              <!-- 上传图片 可以预览图片 -->
                <!-- 检查格式 -->
              <van-uploader v-model="fileList" multiple :max-count="1" :before-read="beforeRead" :after-read="afterRead" />
            </template>

              </van-field>
    <!-- <van-button round  type="info" size="small" native-type="submit" >保存</van-button> -->
    <!-- </van-form> -->
  </van-col> 
  <van-col span="6"></van-col> 
    </van-row>
  <!-- 名字 -->
  
  <div v-if="la">
    <van-form @submit="UpdateMyInfo">
  <van-field
    v-model="tbUser.userNumber"
    name="账号"
    label="账号"
    placeholder="账号"
    readonly
    :rules="[{ required: true, message: '请填写账号' }]"
  />
  <!-- <van-field
    v-model="tbUser.userPassword"
    type="password"
    name="密码"
    label="密码"
    placeholder="密码"
    :rules="[{ required: true, message: '请填写密码' }]"
  /> -->

  <van-field
    v-model="tbUser.userName"
    name="用户名"
    label="用户名"
    placeholder="用户名"
    :rules="[{ required: true, message: '请填写用户名' }]"
  />
  <van-field
    v-model="tbUser.userPhone"
    name="电话号码"
    label="电话号码"
    placeholder="电话号码"
    :rules="[{ required: true, message: '请填写电话号码' }]"

  />
  <van-field
    v-model="tbUser.userEmail"
    name="邮箱"
    label="邮箱"
    placeholder="邮箱"
    :rules="[{ required: true, message: '请填写邮箱' }]"
    
  />



  <div style="margin: 16px;">
    <van-button round block type="info" icon="http://rul4y8e5f.hn-bkt.clouddn.com/%E4%BF%9D%E5%AD%98.png" 
    native-type="submit" @click="save()" >保存</van-button>
  </div>
</van-form>

  </div>
 
  </van-col>
  <van-col span="2"></van-col>
</van-row>


</div>
</template>

<script>
import UserAPI  from '@/api/UserAPI';
import UploadAPI from '@/api/UploadAPI'

export default {
 name: 'MyInfo',
 created(){
  this.getMyInfo()
 },
 mounted() {
  // var getuserId=localStorage.getItem('userId')
  // console.log(getuserId);
  //  this.getMyInfo()
 },
 data() {
  return {
    tbUser: {
      userId:'',
      userNumber: '',
      userName: '游客',
      userIcon: '',
      userPassword: '',
      userPhone: '',
      userEmail: '',

    },
    fileList: [],
    la: false,
  }
 },
 methods: {

  save(){
    this.$router.go(0)
    // this.getMyInfo()
  },

  beforeRead(file) {
      if (file.type == 'image/jpeg' || file.type == 'image/png') {
        console.log('格式正确');
        return true;
      }else{
        this.$toast('请上传 jpg 格式图片')
        console.log('请上传 jpg 格式图片');
        return false;
      }
    
    },
    // 读取图片文件后
    afterRead(file){
      console.log(file);
      this.uploadIcon(file)
    },

    uploadIcon(file){
    var result = UploadAPI.Upload2Qiniu(file)
      // 获取响应结果 
      result.then((val)=>{
        if(val.success){
          console.log(val)
          this.tbUser.userIcon=val.data
          console.log(this.tbUser.userIcon);
        }else{
          console.log(val.errorMsg)
          alert(val.errorMsg)
      
        }
            })
  },

  getMyInfo(){
    var result = UserAPI.MyAllInfo()
      // 获取响应结果 
      result.then((val)=>{
        console.log(val)
        if(val.success){
          console.log(val)
          this.tbUser =val.data
          this.la=true
          // console.log(this.userDTO.userIcon);
        }else{
          console.log(val.errorMsg)
          alert(val.errorMsg)
      
        }
            })
  },

 UpdateMyInfo(){
    var result = UserAPI.Update(this.tbUser)
      // 获取响应结果 
      result.then((val)=>{
        console.log(val)
        if(val.success){
          console.log(val)
          this.tbUser =val.data
          this.la=true
          // console.log(this.userDTO.userIcon);
        }else{
          console.log(val.errorMsg)
          alert(val.errorMsg)
      
        }
            })
  },
 
 }
}
</script>

<style>

</style>